<template>
  <div class="page flex-col">
    <div class="main1 flex-col">
      <div class="layer1 flex-col">
        <div class="block1 flex-col"><span class="word1">活动规则</span></div>
        <span class="txt1">活动时间:2020.12.31-2021.02.30</span>
        <div class="block2 flex-col">
          <div class="mod1 flex-col">
            <span class="txt2">恭喜河南张*获得XXXXXX”</span>
            <div class="section1 flex-row">
              <img
                class="img1"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/dds/ddsDraw/bwb.png"
              />
              <img
                class="pic1"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/dds/ddsDraw/znyx.png"
              />
              <img
                class="img2"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/dds/ddsDraw/zx.png"
              />
            </div>
            <div class="section2 flex-row">
              <img
                class="img3"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/dds/ddsDraw/zlyc.png"
              />
              <img
                class="img4"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/dds/ddsDraw/xxcy.png"
              />
            </div>
            <div class="section3 flex-col">
              <span class="txt3">中奖记录</span>
            </div>
          </div>
          <img
            class="pic2"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/dds/ddsDraw/dhys.png"
          />
          <img
            class="img5"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/dds/ddsDraw/zsh.png"
          />
          <div class="mod2 flex-col">
            <span class="word2">剩余1次机会</span>
          </div>
          <img
            class="pic3"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/dds/ddsDraw/aqy.png"
          />
        </div>
        <span class="info1">获得更多抽奖机会</span>
        <div class="block3 flex-row">
          <div class="outer1 flex-col">
            <div class="main2 flex-col">
              <span class="txt4">早间登录</span>
              <span class="word3">0:00至10:00</span>
              <span class="info2">获得1次抽奖机会</span>
              <div class="block4 flex-col">
                <span class="word4">已过期</span>
              </div>
            </div>
          </div>
          <div class="outer2 flex-col">
            <div class="main3 flex-col">
              <span class="word5">午间登录</span>
              <span class="txt5">10:00至16:00</span>
              <span class="info3">获得1次抽奖机会</span>
              <div class="outer3 flex-col">
                <div class="section4 flex-row">
                  <img
                    class="icon1"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/dds/ddsDraw/dg.png"
                  />
                  <span class="word6">已领取</span>
                </div>
              </div>
            </div>
          </div>
          <div class="outer4 flex-col">
            <div class="bd1 flex-col">
              <span class="word7">晚间登录</span>
              <span class="word8">16:00至24:00</span>
              <span class="word9">获得1次抽奖机会</span>
              <button class="main4 flex-col" @click="onClick_1">
                <span class="word10">待登录</span>
              </button>
            </div>
          </div>
        </div>
        <div class="block5 flex-col">
          <div class="bd2 flex-col">
            <div class="box1 flex-col">
              <span class="txt6">今日学习时长</span>
              <span class="word11">每日在e学堂学习10分钟，获得1次抽奖机会</span>
              <img
                class="pic4"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0f682061e486d18df26acfa17a462b7c246f1c533df05f802966eaad09073614"
              />
              <div class="main5 flex-row">
                <span class="txt7">1分钟</span>
                <span class="info4">10分钟</span>
              </div>
              <button class="main6 flex-col" @click="onClick_2">
                <span class="word12">去学习</span>
              </button>
            </div>
          </div>
        </div>
        <div class="block6 flex-col">
          <div class="group1 flex-col">
            <div class="outer5 flex-col">
              <span class="word13">今日新增瑞管家托管客户</span>
              <span class="txt8">
                当日每新增1位瑞管家托管客户，获得1次抽奖机会
              </span>
              <div class="group2 flex-row">
                <div class="wrap1 flex-col">
                  <span class="txt9">+2</span>
                  <span class="info5">新增托管客户</span>
                </div>
                <div class="wrap2 flex-col"></div>
                <div class="wrap3 flex-col">
                  <span class="word14">2</span>
                  <span class="word15">获得抽奖次数</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="block7 flex-col">
          <div class="layer2 flex-col">
            <div class="layer3 flex-col">
              <span class="info6">今日代理人出单</span>
              <span class="txt10">内容待定内容待定内容待定</span>
              <div class="section5 flex-row">
                <div class="layer4 flex-col">
                  <span class="info7">+2</span>
                  <span class="word16">出单数量</span>
                </div>
                <div class="layer5 flex-col"></div>
                <div class="layer6 flex-col">
                  <span class="word17">2</span>
                  <span class="txt11">获得抽奖次数</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layer7 flex-col">
        <img
          class="img6"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/dds/ddsDraw/background2.png"
        />
        <img
          class="img7"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/dds/ddsDraw/background.png"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {}
    };
  },
  methods: {
    onClick_1() {
      alert(1);
    },
    onClick_2() {
      alert(1);
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  width: 750px;
  height: 2699px;
  overflow: hidden;
  .main1 {
    z-index: 5;
    height: 2699px;
    overflow: hidden;
//     background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd15aeb60f623d6342b639cc20766c83bea04550de32ad90240ed8cb8a10e9216)
//       100% no-repeat;
// background-size: cover;
// -webkit-background-size: cover;
// -o-background-size: cover;
    width: 750px;
    justify-content: center;
    position: relative;
    .layer1 {
      z-index: auto;
      width: 750px;
      height: 2618px;
      .block1 {
        z-index: 125;
        height: 46px;
        border-radius: 23px 0 0 23px;
        background-color: rgba(255, 225, 155, 1);
        align-self: flex-end;
        width: 136px;
        justify-content: center;
        align-items: flex-end;
        padding-right: 14px;
        .word1 {
          z-index: 126;
          // width: 104px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(165, 19, 25, 1);
          font-size: 26px;
        //   font-family: Helvetica;
          line-height: 46px;
          text-align: left;
        }
      }
      .txt1 {
        z-index: 19;
        width: 690px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 247, 212, 1);
        font-size: 26px;
        letter-spacing: 0.8357142806053162px;
        font-family: PingFangSC-Medium;
        line-height: 37px;
        text-align: center;
        align-self: center;
        margin-top: 286px;
      }
      .block2 {
        z-index: 12;
        height: 857px;
        background: url('../../assets/imgs/dds/ddsDraw/choujiang.png')
          100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        margin-top: 29px;
        width: 750px;
        justify-content: flex-start;
        align-items: flex-end;
        position: relative;
        padding: 21px 77px 0 0;
        .mod1 {
          z-index: auto;
          width: 581px;
          height: 738px;
          .txt2 {
            z-index: 123;
            width: 410px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 24px;
            line-height: 33px;
            text-align: center;
            align-self: flex-start;
            margin-left: 78px;
          }
          .section1 {
            z-index: auto;
            width: 581px;
            height: 176px;
            margin-top: 63px;
            justify-content: space-between;
            .img1 {
              z-index: 95;
              width: 191px;
              height: 176px;
            }
            .pic1 {
              z-index: 98;
              width: 192px;
              height: 176px;
            }
            .img2 {
              z-index: 101;
              width: 191px;
              height: 176px;
            }
          }
          .section2 {
            z-index: auto;
            width: 581px;
            height: 176px;
            margin-top: 174px;
            justify-content: space-between;
            .img3 {
              z-index: 122;
              width: 191px;
              height: 176px;
            }
            .img4 {
              z-index: 116;
              width: 191px;
              height: 176px;
            }
          }
          .section3 {
            z-index: 14;
            height: 50px;
            border: 1px solid #A90919;
            border-radius: 25px;
            align-self: flex-start;
            width: 190px;
            justify-content: center;
            align-items: center;
            margin: 66px 0 0 188px;
            .txt3 {
              z-index: 17;
              // width: 112px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(124, 7, 18, 1);
              font-size: 28px;
              line-height: 40px;
              text-align: center;
            }
          }
        }
        .pic2 {
          z-index: 104;
          position: absolute;
          left: 92px;
          top: 291px;
          width: 191px;
          height: 176px;
        }
        .img5 {
          z-index: 113;
          position: absolute;
          left: 482px;
          top: 291px;
          width: 191px;
          height: 176px;
        }
        .mod2 {
          z-index: 109;
          height: 182px;
          background: url('../../assets/imgs/dds/ddsDraw/kscj.png')
            100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
          width: 195px;
          justify-content: flex-end;
          align-items: flex-start;
          position: absolute;
          left: 283px;
          top: 291px;
          padding: 0 0 55px 13px;
          .word2 {
            z-index: 110;
            width: 159px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(107, 20, 12, 1);
            font-size: 24px;
            line-height: 33px;
            text-align: center;
          }
        }
        .pic3 {
          z-index: 119;
          position: absolute;
          left: 286px;
          top: 467px;
          width: 191px;
          height: 176px;
        }
      }
      .info1 {
        z-index: 18;
        // width: 288px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 216, 146, 1);
        font-size: 36px;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
        line-height: 50px;
        text-align: center;
        align-self: center;
        margin-top: 44px;
      }
      .block3 {
        z-index: auto;
        width: 670px;
        height: 240px;
        justify-content: space-between;
        margin: 40px 0 0 40px;
        .outer1 {
          z-index: 64;
          height: 240px;
          border-radius: 10px;
          background: linear-gradient(180deg, #FFD79A 0%, #FFBC96 100%);
          width: 214px;
          justify-content: center;
          align-items: center;
          .main2 {
            z-index: auto;
            // width: 178px;
            height: 182px;
            .txt4 {
              z-index: 70;
              width: 168px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(124, 7, 18, 1);
              font-size: 28px;
              font-family: Helvetica;
              line-height: 34px;
              text-align: center;
              align-self: center;
            }
            .word3 {
              z-index: 68;
              // width: 133px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(116, 48, 9, 1);
              font-size: 24px;
              line-height: 34px;
              text-align: center;
              align-self: center;
              margin-top: 14px;
            }
            .info2 {
              z-index: 69;
              // width: 178px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(116, 48, 9, 1);
              font-size: 24px;
              line-height: 34px;
              text-align: center;
            }
            .block4 {
              z-index: 66;
              height: 40px;
              border-radius: 20px;
              border: 1px solid #9E1414;
              align-self: flex-start;
              width: 140px;
              justify-content: center;
              align-items: center;
              margin: 20px 0 0 16px;
              .word4 {
                z-index: 67;
                // width: 72px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(142, 12, 12, 1);
                font-size: 24px;
                line-height: 34px;
                text-align: left;
              }
            }
          }
        }
        .outer2 {
          z-index: 73;
          height: 240px;
          border-radius: 10px;
          background: linear-gradient(180deg, #FFD79A 0%, #FFBC96 100%);
          width: 214px;
          justify-content: center;
          align-items: center;
          .main3 {
            z-index: auto;
            // width: 178px;
            height: 182px;
            .word5 {
              z-index: 81;
            //   width: 112px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(124, 7, 18, 1);
              font-size: 28px;
              font-family: Helvetica;
              line-height: 34px;
              text-align: center;
              align-self: center;
            }
            .txt5 {
              z-index: 82;
              // width: 143px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(116, 48, 9, 1);
              font-size: 24px;
              line-height: 34px;
              text-align: center;
              align-self: center;
              margin-top: 14px;
            }
            .info3 {
              z-index: 83;
              // width: 178px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(116, 48, 9, 1);
              font-size: 24px;
              line-height: 34px;
              text-align: center;
            }
            .outer3 {
              z-index: 75;
              height: 40px;
              border-radius: 20px;
              border: 1px solid #9E1414;
              align-self: center;
              margin-top: 20px;
            //   width: 140px;
              justify-content: center;
              align-items: flex-start;
            //   padding-left: 14px;
                padding: 0 23px 0 14px;
              .section4 {
                z-index: auto;
                // width: 103px;
                height: 34px;
                justify-content: space-between;
                .icon1 {
                  z-index: 78;
                  width: 30px;
                  height: 30px;
                  margin-top: 2px;
                }
                .word6 {
                  z-index: 76;
                  // width: 72px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(142, 12, 12, 1);
                  font-size: 24px;
                  line-height: 34px;
                  text-align: left;
                }
              }
            }
          }
        }
        .outer4 {
          z-index: 85;
          height: 240px;
          border-radius: 10px;
          background: linear-gradient(180deg, #FFD79A 0%, #FFBC96 100%);
          width: 214px;
          justify-content: center;
          align-items: center;
          .bd1 {
            z-index: auto;
            // width: 178px;
            height: 182px;
            .word7 {
              z-index: 89;
            //   width: 112px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(124, 7, 18, 1);
              font-size: 28px;
              font-family: Helvetica;
              line-height: 34px;
              text-align: center;
              align-self: center;
            }
            .word8 {
              z-index: 90;
              // width: 148px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(116, 48, 9, 1);
              font-size: 24px;
              line-height: 34px;
              text-align: center;
              align-self: center;
              margin-top: 14px;
            }
            .word9 {
              z-index: 91;
              // width: 178px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(116, 48, 9, 1);
              font-size: 24px;
              line-height: 34px;
              text-align: center;
            }
            .main4 {
              z-index: 87;
              height: 40px;
              border-radius: 20px;
              background-color: rgba(169, 9, 25, 1);
              align-self: center;
              margin-top: 20px;
              width: 140px;
              justify-content: center;
              align-items: center;
              .word10 {
                z-index: 88;
                // width: 72px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(255, 233, 227, 1);
                font-size: 24px;
                font-family: Helvetica;
                line-height: 34px;
                text-align: left;
                background-image: linear-gradient(
                  180deg,
                  rgba(255, 198, 110, 1) 0%,
                  rgba(248, 164, 116, 1) 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
      .block5 {
        z-index: 47;
        height: 378px;
        border-radius: 20px;
        background: linear-gradient(180deg, #F8A474 0%, #FFC66E 100%);
        align-self: center;
        margin-top: 20px;
        width: 670px;
        justify-content: center;
        align-items: center;
        .bd2 {
          z-index: 48;
          height: 356px;
          border-radius: 16px;
          background-color: rgba(255, 243, 221, 1);
          width: 650px;
          justify-content: center;
          align-items: center;
          .box1 {
            z-index: auto;
            width: 590px;
            height: 306px;
            .txt6 {
              z-index: 60;
              width: 590px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(79, 30, 18, 1);
              font-size: 32px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              line-height: 45px;
              text-align: left;
            }
            .word11 {
              z-index: 61;
              width: 590px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(152, 92, 78, 1);
              font-size: 26px;
              line-height: 34px;
              text-align: left;
              margin-top: 4px;
            }
            .pic4 {
              z-index: 55;
              width: 590px;
              height: 20px;
              margin-top: 46px;
            }
            .main5 {
              z-index: auto;
              width: 570px;
              height: 33px;
              justify-content: space-between;
              margin: 10px 0 0 20px;
              .txt7 {
                z-index: 58;
                // width: 58px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(152, 92, 78, 1);
                font-size: 24px;
                line-height: 33px;
                text-align: right;
              }
              .info4 {
                z-index: 59;
                // width: 73px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(152, 92, 78, 1);
                font-size: 24px;
                line-height: 33px;
                text-align: left;
              }
            }
            .main6 {
              z-index: 52;
              height: 80px;
              border-radius: 40px;
              background: url('../../assets/imgs/dds/ddsDraw/jx.png') 100% no-repeat;
              background-size: cover;
              margin-top: 34px;
              width: 590px;
              justify-content: center;
              align-items: center;
              .word12 {
                z-index: 53;
                // width: 96px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(79, 30, 18, 1);
                font-size: 32px;
                font-family: Helvetica;
                line-height: 60px;
                text-align: center;
              }
            }
          }
        }
      }
      .block6 {
        z-index: 34;
        height: 276px;
        border-radius: 20px;
        background: linear-gradient(180deg, #F8A474 0%, #FFC66E 100%);
        align-self: center;
        margin-top: 20px;
        width: 670px;
        justify-content: center;
        align-items: center;
        .group1 {
          z-index: 35;
          height: 256px;
          border-radius: 10px;
          background-color: rgba(255, 243, 221, 1);
          width: 650px;
          justify-content: center;
          align-items: center;
          .outer5 {
            z-index: auto;
            width: 590px;
            height: 205px;
            .word13 {
              z-index: 36;
              width: 590px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(79, 30, 18, 1);
              font-size: 32px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              line-height: 45px;
              text-align: left;
            }
            .txt8 {
              z-index: 37;
              width: 590px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(152, 92, 78, 1);
              font-size: 26px;
              line-height: 34px;
              text-align: left;
              margin-top: 4px;
            }
            .group2 {
              z-index: auto;
              width: 590px;
              height: 98px;
              margin-top: 24px;
              justify-content: space-between;
              .wrap1 {
                z-index: auto;
                width: 265px;
                height: 98px;
                .txt9 {
                  z-index: 41;
                  width: 49px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(169, 9, 25, 1);
                  font-size: 40px;
                  font-family: Helvetica;
                  line-height: 48px;
                  text-align: center;
                  align-self: flex-end;
                  margin-right: 105px;
                }
                .info5 {
                  z-index: 40;
                  width: 265px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(79, 3, 10, 1);
                  font-size: 26px;
                  line-height: 34px;
                  text-align: center;
                  margin-top: 8px;
                }
              }
              .wrap2 {
                z-index: 45;
                width: 1px;
                height: 60px;
                background-color: rgba(79, 30, 18, 1);
                margin-top: 19px;
              }
              .wrap3 {
                z-index: auto;
                width: 264px;
                height: 98px;
                .word14 {
                  z-index: 43;
                  width: 24px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(169, 9, 25, 1);
                  font-size: 40px;
                  font-family: Helvetica;
                  line-height: 48px;
                  text-align: center;
                  align-self: flex-start;
                  margin-left: 118px;
                }
                .word15 {
                  z-index: 44;
                  width: 264px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(79, 3, 10, 1);
                  font-size: 26px;
                  line-height: 34px;
                  text-align: center;
                  margin-top: 8px;
                }
              }
            }
          }
        }
      }
      .block7 {
        z-index: 21;
        height: 275px;
        border-radius: 20px;
        background: linear-gradient(180deg, #F8A474 0%, #FFC66E 100%);
        align-self: center;
        margin-top: 20px;
        width: 670px;
        justify-content: center;
        align-items: center;
        .layer2 {
          z-index: 22;
          height: 255px;
          border-radius: 10px;
          background-color: rgba(255, 243, 221, 1);
          width: 650px;
          justify-content: center;
          align-items: center;
          .layer3 {
            z-index: auto;
            width: 590px;
            height: 205px;
            .info6 {
              z-index: 23;
              width: 590px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(79, 30, 18, 1);
              font-size: 32px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              line-height: 45px;
              text-align: left;
            }
            .txt10 {
              z-index: 24;
              width: 590px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(152, 92, 78, 1);
              font-size: 26px;
              line-height: 34px;
              text-align: left;
              margin-top: 4px;
            }
            .section5 {
              z-index: auto;
              width: 590px;
              height: 98px;
              margin-top: 24px;
              justify-content: space-between;
              .layer4 {
                z-index: auto;
                width: 265px;
                height: 98px;
                .info7 {
                  z-index: 28;
                //   width: 49px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(169, 9, 25, 1);
                  font-size: 40px;
                  font-family: Helvetica;
                  line-height: 48px;
                  text-align: center;
                  align-self: flex-end;
                  margin-right: 105px;
                }
                .word16 {
                  z-index: 27;
                  width: 265px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(79, 3, 10, 1);
                  font-size: 26px;
                  line-height: 34px;
                  text-align: center;
                  margin-top: 8px;
                }
              }
              .layer5 {
                z-index: 32;
                width: 1px;
                height: 60px;
                background-color: rgba(79, 30, 18, 1);
                margin-top: 19px;
              }
              .layer6 {
                z-index: auto;
                width: 264px;
                height: 98px;
                .word17 {
                  z-index: 30;
                //   width: 24px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(169, 9, 25, 1);
                  font-size: 40px;
                  font-family: Helvetica;
                  line-height: 48px;
                  text-align: center;
                  align-self: flex-start;
                  margin-left: 118px;
                }
                .txt11 {
                  z-index: 31;
                  width: 264px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(79, 3, 10, 1);
                  font-size: 26px;
                  line-height: 34px;
                  text-align: center;
                  margin-top: 8px;
                }
              }
            }
          }
        }
      }
    }
    .layer7 {
      z-index: 7;
      height: 2699px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge13d5b54c0e828d32c955a94e4f04a1cc4b2c587920aad11a98a191cb3da42f5)
        100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
      width: 750px;
      justify-content: flex-end;
      position: absolute;
      left: 0;
      top: 0;
      .img6 {
        z-index: 8;
        width: 750px;
        height: 1360px;
      }
      .img7 {
        z-index: 10;
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 1340px;
      }
    }
  }
}

</style>
